var ProductListData;
$(document).ready(function(){
	onProductLoad(expertiseId);
});
//div_manufacturer
function onProductLoad(expertiseId){
	$.ajax({
		 type: "POST",
		 url: 'ProductServlet',
		 data: {
			 ACTION : "GETMANUFACTURER",
			 expertiseId : expertiseId
			},
		 dataType: "json",
		 success: function(data){
			var tableLayout = genManufacturerLayout(data);
			$(".tbl_manufacturer").html(tableLayout);
		 },
		error : function(xhr, ajaxOptions, thrownError) {
			alert("Error while processing.");
		}
	});
}

function genManufacturerLayout(data){
	var loops = data.length;
	var tableLayout = "";
	var i=0;
	var initialVal = 0;
	var mod = 3;
	if(loops > 0){
		if(typeof data[0].expertiseName != 'undefined'){
			i=1;
			initialVal = 1;
			mod = 4;
			tableLayout += "<tr><td colspan='10' class='td_expertisename'><br><b>PRODUCTS<br>"+data[0].expertiseName+"<b><br><br></td></tr>";
		}else{
			tableLayout += "<tr><td colspan='10' class='td_expertisename'><br><b>PRODUCTS<b><br><br></td></tr>";
		}
		for(; i<loops; i++){
			if(i == initialVal){
				tableLayout += "<tr>";
			}
			tableLayout += "<td onclick='gotoProductList("+data[i].manufacturerId+")'><img class='img_manufacturer_logo' src='images/product/manufacturer_logo/"+data[i].logoName+"' alt='"+data[i].manufacturerName+"' title='"+data[i].manufacturerName+"' width='auto' height='50'></td>";
			if(i%mod == 0 && i > initialVal){
				tableLayout += "</tr><tr>";
			}
		}
		tableLayout += "</tr>";
	}
	return tableLayout;
}

function gotoProductList(manufacturerId){
	$.ajax({
		 type: "POST",
		 url: 'ProductServlet',
		 data: {
			 ACTION : "GETPRODUCTLIST",
			 manufacturerId : manufacturerId
			},
		 dataType: "json",
		 success: function(data){
			ProductListData = data;
			var tableLayout = genProductListLayout(data, 1);
			$(".tbl_manufacturer").html(tableLayout);
		 },
		error : function(xhr, ajaxOptions, thrownError) {
			alert("Error while processing.");
		}
	});
}

function gotoPage(index){
	var tableLayout = genProductListLayout(ProductListData, index);
	$(".tbl_manufacturer").html(tableLayout);
};

function genProductListLayout(data, pages){
	var totalRecords = data.length;
	var maxPage = Math.ceil(totalRecords / itemPerPage);
	var i = 1;
	var loops = totalRecords;
	if(pages > 1){
		i = ((parseInt(pages) * itemPerPage) - itemPerPage) + 1;
	}
	if(maxPage > pages){
		loops = i + itemPerPage;
	}
	var tableLayout = "";
	tableLayout += "<tr><td colspan='10'>"
				+"<div class='div_product_list_box'>PRODUCTS<br>"
				+data[0].manufacturerName
				+"</div>"
				+"<div class='div_logo_manufacturer'>"
				+"<img src='images/product/manufacturer_logo/"+data[0].logoName+"' alt='"+data[0].manufacturerName+"' title='"+data[0].manufacturerName+"' width='auto' height='50'></div></td></tr><tr><td>";
	for(; i<loops; i++){
		tableLayout += "<div class='div_products' onclick='genProductDetailLayout("+i+")'><img class='img_products' src='images/product/products/"+data[i].productId+"/"+data[i].productImgList[0].imgName+"' alt='"+data[i].productImgList[0].imgName+"' width='160' height='160')'>"
					+"<div class='div_productname_blog'>"+data[i].productName+"</div>"
					+"</div>";
	}
	tableLayout += "</tr><tr><td colspan='10' align='center'>"+	genNumPageList(pages, totalRecords)+"</td>";
	return tableLayout;
}

function genNumPageList(page, totalRecord){
	var numpageLayout = "";
	var totalPage = 1;
	if(totalRecord > itemPerPage){
		totalPage = Math.ceil((totalRecord / itemPerPage)); 
	}
	for(var i=1; i<=totalPage;i++){
		if(i == page){
			numpageLayout += "<b>"+i+"</b>&nbsp;";
		}else{
			numpageLayout += "<span class='spn_numpage' onclick='gotoPage("+i+")'>"+i+"</span>&nbsp;";
		}
	}
	return numpageLayout;
}

function genProductDetailLayout(index){
	var data = ProductListData;
	$(".tbl_manufacturer").empty();
	var tableLayouts = "<tr><td colspan='10'>"
		+"<div class='div_product_list_box'>PRODUCTS<br>"
		+data[0].manufacturerName
		+"</div>"
		+"<div class='div_logo_manufacturer'>"
		+"<img src='images/product/manufacturer_logo/"+data[0].logoName+"' alt='"+data[0].manufacturerName+"' title='"+data[0].manufacturerName+"' width='auto' height='50'></div></td></tr><tr><td>";
	tableLayouts += "<div class='div_prod_detail_top'>";
	tableLayouts += "<div class='div_default_prod_detail_img'><img src='images/product/products/"+data[index].productId+"/"+data[index].productImgList[0].imgName+"' width='280' height='320'></div>";
	tableLayouts += "<div class='div_prod_name_conner'>"+data[index].productName+"</div>";
	tableLayouts += "<div class='div_prod_detail_text'><span class='div_prod_detail_text_name'>"+data[index].productName+"</span><br>"+data[index].productDetail+"</div>";
	tableLayouts += "</div>";
	tableLayouts += "<div class='div_img_list'>";
	var loops = data[index].productImgList.length;
	for(var i=1; i<loops; i++){
		tableLayouts += "<div class='div_products'><img class='img_products' src='images/product/products/"+data[index].productId+"/"+data[index].productImgList[i].imgName+"' alt='"+data[index].productImgList[i].imgName+"' width='160' height='160')'></div>";
	}
	tableLayouts += "</div>";
	tableLayouts += "</td></tr>";
	$(".tbl_manufacturer").html(tableLayouts);
}